<template>
  <div class="profile-page">
    <!-- 用户基本信息 -->
    <div class="user-info-card card">
      <div class="avatar-section">
        <!-- 随机用户头像（人物主题，200x200像素） -->
        <img :src="user.avatar" alt="用户头像" class="avatar" />
        <button class="btn-edit" @click="handleEditAvatar">编辑头像</button>
      </div>
      <div class="basic-info">
        <div class="info-item">
          <span class="label">用户名：</span>
          <span class="value" v-if="!isEditingName">{{ user.username }}</span>
          <input v-else v-model="tempUsername" class="input-edit" />
          <button v-if="!isEditingName" class="btn-edit" @click="startEditName">编辑</button>
          <button v-else class="btn-save" @click="saveUsername">保存</button>
        </div>
        <div class="info-item">
          <span class="label">会员等级：</span>
          <span class="value">{{ user.memberLevel }}</span>
          <div class="progress-bar">
            <div class="progress" :style="{ width: user.progress + '%' }"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单管理 -->
    <div class="order-section card">
      <h2 class="section-title">我的订单</h2>
      <div class="order-filters">
        <select v-model="filterStatus" @change="filterOrders">
          <option value="">所有状态</option>
          <option v-for="status in orderStatus" :key="status.value" :value="status.value">{{ status.label }}</option>
        </select>
        <input type="date" v-model="filterStart" @change="filterOrders" />
        <input type="date" v-model="filterEnd" @change="filterOrders" />
      </div>
      <div class="order-list">
        <div v-for="order in filteredOrders" :key="order.id" class="order-item">
          <div class="order-header">
            <span>订单号：{{ order.id }}</span>
            <span>时间：{{ order.createTime }}</span>
            <span>状态：{{ getStatusLabel(order.status) }}</span>
          </div>
          <div class="order-products">
            <!-- 订单商品图片（根据类型添加tag参数） -->
            <img 
              v-for="prod in order.products" 
              :key="prod.id" 
              :src="prod.image" 
              class="order-prod-img" 
              alt="订单商品图"
            />
          </div>
          <div class="order-actions">
            <button class="btn-view" @click="viewOrderDetail(order)">查看详情</button>
            <button v-if="order.status === 'pending'" class="btn-cancel" @click="cancelOrder(order)">取消订单</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 个人设置 -->
    <div class="settings-section card">
      <h2 class="section-title">个人设置</h2>
      <div class="setting-item">
        <span class="setting-label">收货地址管理</span>
        <button class="btn-action" @click="navigateToAddress">管理地址</button>
      </div>
      <div class="setting-item">
        <span class="setting-label">账户安全</span>
        <button class="btn-action" @click="navigateToSecurity">修改密码</button>
      </div>
      <div class="setting-item">
        <span class="setting-label">消息通知</span>
        <button class="btn-action" @click="navigateToNotification">设置通知</button>
      </div>
    </div>

    <!-- 我的钱包 -->
    <div class="wallet-section card">
      <h2 class="section-title">我的钱包</h2>
      <div class="wallet-grid">
        <div class="wallet-item">
          <h3>优惠券</h3>
          <p>{{ coupons.length }}张可用</p>
          <button class="btn-view" @click="viewCoupons">查看详情</button>
        </div>
        <div class="wallet-item">
          <h3>积分</h3>
          <p>{{ user.points }}分</p>
          <button class="btn-view" @click="viewPoints">查看记录</button>
        </div>
        <div class="wallet-item">
          <h3>余额</h3>
          <p>￥{{ user.balance }}</p>
          <button class="btn-view" @click="viewBalance">充值/记录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'; 
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 模拟优惠券数据
const coupons = ref([
  { id: 1, name: '满100减20', valid: true },
  { id: 2, name: '新人专享', valid: false }
]);

// 模拟用户数据（所有图片替换为在线地址）
const user = reactive({ 
  avatar: 'https://picsum.photos/200/200?random=1&theme=people', // 人物头像
  username: '购物达人',
  memberLevel: '金卡会员',
  progress: 65,
  points: 1234,
  balance: 888.88
});

// 模拟订单数据（商品图片使用场景标签）
const orders = ref([
  { 
    id: '20240101001', 
    status: 'pending', 
    createTime: '2024-01-01 10:00', 
    products: [{ 
      id: 1, 
      image: 'https://picsum.photos/200/200?tag=watch' // 手表图片
    }] 
  },
  { 
    id: '20240102002', 
    status: 'shipped', 
    createTime: '2024-01-02 14:30', 
    products: [{ 
      id: 2, 
      image: 'https://picsum.photos/200/200?tag=t-shirt' // T恤图片
    }] 
  }
]);

// 订单状态配置
const orderStatus = [{ value: 'pending', label: '待付款' }, { value: 'shipped', label: '已发货' }];

// 订单筛选状态
const filterStatus = ref('');
const filterStart = ref('');
const filterEnd = ref('');

// 计算属性：过滤后的订单列表
const filteredOrders = computed(() => {
  return orders.value.filter(order => {
    const statusMatch = !filterStatus.value || order.status === filterStatus.value;
    const timeMatch = !filterStart.value || !filterEnd.value || 
      (order.createTime >= filterStart.value && order.createTime <= filterEnd.value);
    return statusMatch && timeMatch;
  });
});

// 编辑状态管理
const isEditingName = ref(false);
const tempUsername = ref(user.username);

// 头像编辑处理
const handleEditAvatar = () => console.log('打开头像上传');

// 用户名编辑处理
const startEditName = () => isEditingName.value = true;
const saveUsername = () => {
  user.username = tempUsername.value;
  isEditingName.value = false;
};

// 获取订单状态标签
const getStatusLabel = (status) => orderStatus.find(s => s.value === status)?.label;

// 订单操作方法
const viewOrderDetail = (order) => router.push({ path: `/order-detail/${order.id}` });
const cancelOrder = (order) => {
  if (confirm('确认取消订单？')) {
    console.log('取消订单:', order.id);
  }
};

// 导航方法
const navigateToAddress = () => router.push('/address');
const navigateToSecurity = () => router.push('/security');
const navigateToNotification = () => router.push('/notification');
const viewCoupons = () => router.push('/coupons');
const viewPoints = () => router.push('/points');
const viewBalance = () => router.push('/balance');
</script>

<style scoped>
.profile-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f5f5;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

.user-info-card {
  display: flex;
  align-items: center;
  gap: 30px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.btn-edit {
  background: #f0f0f0;
  color: #666;
  padding: 5px 12px;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 10px;
}

.basic-info {
  flex: 1;
}

.info-item {
  margin: 15px 0;
}

.label {
  color: #666;
  margin-right: 10px;
}

.value {
  font-size: 16px;
}

.input-edit {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 200px;
}

.progress-bar {
  height: 8px;
  background: #eee;
  border-radius: 4px;
  margin-top: 8px;
}

.progress {
  height: 100%;
  background: #42b983; /* Vue默认主题色 */
  border-radius: 4px;
}

.order-filters {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.order-item {
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 8px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #666;
}

.order-products {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

.order-prod-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.order-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.btn-view {
  background: #42b983;
  color: white;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-cancel {
  background: #ff4d4f;
  color: white;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 8px;
}

.setting-label {
  font-size: 16px;
  color: #333;
}

.btn-action {
  background: #fff;
  color: #42b983;
  border: 1px solid #42b983;
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.wallet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.wallet-item {
  text-align: center;
  padding: 25px;
  background: #f8f8f8;
  border-radius: 8px;
}

.wallet-item h3 {
  color: #333;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .user-info-card {
    flex-direction: column;
    text-align: center;
  }
  .order-filters {
    flex-direction: column;
  }
  .wallet-grid {
    grid-template-columns: 1fr;
  }
}
</style>